<!-- 首页 -->
<template>
  <div class="main">
    <!-- 第一行 -->
    <el-row :gutter="24" class="first-row">
      <el-col :span="6">
        <el-card shadow="hover" class="first-line-card">
          <div slot="header" class="clearfix">
            <span>当前用户</span>
          </div>
          <div class="userInfoCard">
            <span>
              <b style="font-size:16px;color:#222226">{{ userData.userInfo.username }}</b>
              <br/>
              <br/>
              <b style="font-size:12px">上次登录时间：</b>{{ userData.userInfo.lastLogin }}
            </span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="first-line-card">
          <div slot="header" class="clearfix">
            <span>天气</span>
          </div>
          <div>
            //todo
            <br/>
            暂未实现
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="first-line-card">
          <div slot="header" class="clearfix">
            <span>当前日期</span>
            <el-tag type="success" class="tags"> {{ currentDate }} </el-tag>
          </div>
          <div class="first-CardInfo">
            {{ currentWeekDay }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="first-line-card">
          <div slot="header" class="clearfix">
            <span>当前时间</span>
            <el-tag class="tags"> {{ currentInterval }} </el-tag>
          </div>
          <div class="first-CardInfo">
            {{ currentDateTime }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card shadow="hover" class="second-line-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >操作按钮</el-button
            >
          </div>
          <div v-for="o in 3" :key="o" class="text item">
            {{ "列表内容 " + o }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row :gutter="24" class="third-row">
      <el-col :span="8" class="third-first-col">
        <el-card shadow="hover" class="third-line-one-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >操作按钮</el-button
            >
          </div>
          <div v-for="o in 3" :key="o" class="text item">
            {{ "列表内容 " + o }}
          </div>
        </el-card>

        <el-card shadow="hover" class="third-line-two-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >操作按钮</el-button
            >
          </div>
          <div v-for="o in 3" :key="o" class="text item">
            {{ "列表内容 " + o }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="third-line-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >操作按钮</el-button
            >
          </div>
          <div v-for="o in 3" :key="o" class="text item">
            {{ "列表内容 " + o }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="third-line-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >操作按钮</el-button
            >
          </div>
          <div v-for="o in 3" :key="o" class="text item">
            {{ "列表内容 " + o }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "Index",
  },
  data() {
    //这里存放数据
    return {
      currentDateTime: "", //当前时间 时分秒
      currentInterval: "", //时间段 上午中午下午晚上
      currentDate: "", //当前日期
      currentWeekDay: "", //当前星期
      userData: {}, //当前用户
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //从store中获取当前用户信息
    getUserData() {
      this.userData = this.$store.state.user;
      //console.log(this.userData);
      //username id avatar lastLogin
    },
    //获取当前时间
    getCurrentDateTime() {
      setInterval(() => {
        let date = new Date();
        //格式化
        let tempdate =
          date.getHours() +
          "点" +
          date.getMinutes() +
          "分" +
          date.getSeconds() +
          "秒";
        //赋值当前时间段
        this.currentInterval = this.getCurrentInterval(date.getHours());
        //赋值当前时间
        this.currentDateTime = tempdate;
      }, 1000);
    },
    //一次性 获取当前时间 解决页面刷新需要等待一秒才能获取当前时间的问题
    getOnceCurrentTime() {
      let date = new Date();
      //格式化
      let tempdate =
        date.getHours() +
        "点" +
        date.getMinutes() +
        "分" +
        date.getSeconds() +
        "秒";
      //赋值当前时间段
      this.currentInterval = this.getCurrentInterval(date.getHours());
      //赋值当前时间
      this.currentDateTime = tempdate;
    },
    //根据小时判断 获取当前时间段
    getCurrentInterval(currHour) {
      let interval = "未知";
      //console.log(currHour)

      if (0 <= currHour && currHour <= 4) {
        interval = "凌晨";
      } else if (5 <= currHour && currHour <= 7) {
        interval = "早晨";
      } else if (8 <= currHour && currHour <= 10) {
        interval = "上午";
      } else if (11 <= currHour && currHour <= 12) {
        interval = "中午";
      } else if (13 <= currHour && currHour <= 17) {
        interval = "下午";
      } else if (18 <= currHour && currHour <= 21) {
        interval = "晚上";
      } else if (22 <= currHour && currHour <= 23) {
        interval = "深夜";
      }
      return interval;
    },
    //根据当天判断今天是周几
    getWeekDay(currDay) {
      let weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      let week = weeks[currDay];
      return week;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //实时显示时间
    this.getOnceCurrentTime();
    this.getCurrentDateTime();
    //赋值当前日期
    this.currentDate = new Date().toLocaleDateString();
    //赋值当前属于星期几
    this.currentWeekDay = this.getWeekDay(new Date().getDay());
    //从store中获取当前用户对象
    this.getUserData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  //3.0版本弃用 beforeDestroy() {}, //生命周期 - 销毁之前
  //3.0版本弃用 destroyed() {}, //生命周期 - 销毁完成
  beforeUnmount() {}, //生命周期 - 销毁之前
  unmounted() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 第一行 */
.first-line-row {
  display: flex;
  flex-direction: row;
}
/* 第一行卡片 */
.first-line-card {
  height: 140px;
  color: #7a7d80;
  /* background-color: red; */
}
/* 第一行卡片info信息 */
.first-CardInfo {
  color: #7a7d80;
  font-size: 30px;
  font-weight: initial;
}
/* 第二行卡片 */
.second-line-card {
  height: 300px;
}
/* 第三行卡片 */
.third-line-card {
  height: 600px;
}
/* 第三行第一列 */
.third-first-col {
  display: flex;
  flex-direction: column;
}
/* 第三行第一列第一个卡片 */
.third-line-one-card {
  height: 100px;
  margin-bottom: 24px;
}
/* 第三行第一列第二个卡片 */
.third-line-two-card {
  height: 475px;
}
/* 行 */
.el-row {
  margin: 24px 0px;
}
/* 卡片 */
.el-card {
  box-shadow: 0px -1px 0 #e7eaec;
  border-radius: 0px;
}
/* 卡片title */
.clearfix span {
  font-weight: bold;
  color: #676a6c;
}
/* 标签tag */
.tags {
  float: right;
  margin-top: -8px;
  margin-right: -8px;
}
</style>